<template>
  <div class="my">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人资料</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <el-form :model="form" label-width="auto">
        <el-form-item label="账号" prop="name">
          <el-input v-model="form.name" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input
            v-model="form.pwd"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确定密码" prop="pwd">
          <el-input
            v-model="form.pwd2"
            type="password"
            placeholder="请确定输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="submit">
        <el-button size="mini" type="primary" @click="updatepwd">修改</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: sessionStorage.getItem("loginname"),
        pwd: sessionStorage.getItem("loginpassword"),
        pwd2: "",
        id: sessionStorage.getItem("id")
      }
    };
  },
  methods: {
    //   修改密码
    updatepwd() {
      const that = this;
      if (that.form.pwd == that.form.pwd2) {
        that.$http
          .post("/updatepwd", that.form)
          .then(() => {
            // console.log(res);
            that.$message({
              message: "密码修改成功,请重新登录",
              type: "success"
            });
            this.$router.push({ path: "/login" });
            sessionStorage.removeItem("loginname");
            sessionStorage.removeItem("loginpassword");
            sessionStorage.removeItem("nickname");
            sessionStorage.removeItem("id");
          })
          .catch(function() {});
      } else {
        that.$message({
          message: "两次密码不一致，请重新输入",
          type: "error"
        });
      }
    }
  }
};
</script>

<style scoped>
.my .el-input{
    width: 300px;
    float: left;
}
.my .el-button{
    margin:0 0 10px 150px;
    float: left;
}
</style>